import { h, render } from 'vue'
import XtxConfirm from './xtx-confirm.vue'
// 准备一个用于放自定义组件的容器
const VNodeDiv = h('div', { class: 'xtx-confirm-container' })
render(VNodeDiv, document.body)
// 获取 DOM 节点，用于挂载组件或卸载组件
const container = VNodeDiv.el

const xtxConfirm = ({ title, text }) => {
  // 返回 Promise 对象
  return new Promise((resolve, reject) => {
    // 点击确定
    const confirmCallback = () => {
      render(null, container)
      resolve()
    }
    // 点击取消
    const cancelCallback = () => {
      render(null, container)
      reject(new Error('点击了取消'))
    }

    // 动态创建组件
    const ConfirmVNode = h(XtxConfirm, { title, text, confirmCallback, cancelCallback })
    render(ConfirmVNode, container)
  })
}

export default xtxConfirm
